<template>
  <div class="admin">
    <div class="menu" v-bind:style="{ width: menuWidth }">
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isHideMenu"
        :collapse-transition="false"
        background-color="#4c67ff"
        text-color="#fff"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="iconfont icon-basic-configuration"></i>
            <span slot="title">后台首页</span>
          </template>
          <el-menu-item index="1-1">
            <i class="iconfont icon-system-center"></i>
            欢迎页</el-menu-item
          >
          <el-menu-item index="1-2">
            <i class="iconfont icon-system-center"></i>
            访客记录</el-menu-item
          >
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="iconfont icon-business"></i>
            <span slot="title">商品分类</span>
          </template>
          <el-menu-item index="2-1">
            <i class="iconfont icon-system-center"></i>
            分类列表</el-menu-item
          >
          <el-menu-item index="2-2">
            <i class="iconfont icon-system-center"></i>
            分类创建</el-menu-item
          >
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="iconfont icon-commodity-operate"></i>
            <span slot="title">商品规格</span>
          </template>
          <el-menu-item index="3-1">
            <i class="iconfont icon-system-center"></i>
            商品类型</el-menu-item
          >
          <el-menu-item index="3-2">
            <i class="iconfont icon-system-center"></i>
            类型创建</el-menu-item
          >
          <el-menu-item index="3-3">
            <i class="iconfont icon-system-center"></i>
            商品属性</el-menu-item
          >
          <el-menu-item index="3-4">
            <i class="iconfont icon-system-center"></i>
            属性创建</el-menu-item
          >
        </el-submenu>
        <el-submenu index="4">
          <template slot="title">
            <i class="iconfont icon-returned-purchase"></i>
            <span slot="title">商品管理</span>
          </template>
          <el-menu-item index="4-1">
            <i class="iconfont icon-system-center"></i>
            商品列表</el-menu-item
          >
        </el-submenu>
        <el-submenu index="5">
          <template slot="title">
            <i class="iconfont icon-group-sales"></i>
            <span slot="title">订单管理</span>
          </template>
          <el-menu-item index="5-1">
            <i class="iconfont icon-system-center"></i>
            订单管理</el-menu-item
          >
        </el-submenu>
      </el-menu>
    </div>
    <div class="main">
      <!-- top -->
      <div class="top">
        <div class="l">
          <div class="btn" @click="changeMenuFn">
            <i :class="menuIcon"></i>
          </div>
          <div class="breadcrumb">
            <!-- 面包屑 -->
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item>商品管理</el-breadcrumb-item>
              <el-breadcrumb-item>列表</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div class="r">
          <span> 管理员 </span>
          <i class="iconfont icon-power"></i>
          <i class="iconfont icon-quanping"></i>
        </div>
      </div>
      <!-- top-end -->
      <!-- content -->
      <div class="content">
        <!-- 在路由已经匹配的组件中挖坑 匹配二级路由 -->
        <router-view></router-view>
      </div>
      <!-- content -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.admin {
  height: 100%;
  width: 100%;
  display: flex;

  .menu {
    height: 100%;
    width: 200px;
    background: #4c67ff;
    transition: width 0.28s;
    .el-menu {
      border: none;
      .iconfont {
        font-size: 22px;
        margin-right: 10px;
        color: #fff;
      }
    }
  }
  .main {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .top {
      width: 100%;
      height: 50px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      margin-bottom: 30px;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
      .l {
        width: 300px;
        height: 100%;
        background: #fff;
        display: flex;
        .btn {
          width: 50px;
          height: 100%;
          background: #fff;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 24px;
          color: #fff;
        }
        .btn:hover {
          background: rgba(0, 0, 0, 0.025);
          cursor: pointer;
        }
        .breadcrumb {
          width: 250px;
          height: 100%;
          background: #fff;
          display: flex;
          // justify-content: center;
          align-items: center;
        }
      }
      .r {
        width: 240px;
        height: 100%;
        color: #fff;
        background: #fff;

        line-height: 50px;
        i {
          font-size: 20px;
          margin-right: 5px;
        }
        span {
          font-size: 16px;
        }
      }
    }
    .content {
      flex: 1;

      background: #fff;
    }
  }
}
</style>
<script>
export default {
  data() {
    return {
      //菜单相关
      isHideMenu: false,
      menuIcon: "el-icon-s-fold",
      menuWidth: "200px",
    };
  },
  methods: {
    // 控制菜单切换
    //1.给按钮绑定点击事件
    //2.事件处理函数中
    // 2.1 控制图标切换 判断isHideMenu true-图标向右，false-图标向左
    // 2.2 控制.menu宽度 先加v-bind：style='{width:使用模型数据}'  事件中判断isHideMenu true-64px false-200px
    //3.关闭原来的特效，否则会有卡文字效果
    //4.因为是自己控制menu的宽度，默认情况下比较生硬，得用css加过渡
    changeMenuFn() {
      //先取反，再判断
      this.isHideMenu = !this.isHideMenu;
      this.menuIcon = this.isHideMenu ? "el-icon-s-unfold" : "el-icon-s-fold";
      this.menuWidth = this.isHideMenu ? "64px" : "200px";
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>
